<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="/static/css/pintuer.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/pintuer.js"></script>

    <style>
        .updates {
            position: fixed; /* 使其悬浮在页面上 */
            top: 10%; /* 从顶部开始，可以根据需要调整 */
            left: 10%; /* 从左侧开始，可以根据需要调整 */
            width: 80%; /* 占据整体窗口的80%宽度 */
            height: 80%; /* 占据整体窗口的80%高度，但通常你可能需要设置max-height来避免过大 */
            background-color: rgba(255, 255, 255, 0.8); /* 白色背景，80%透明度 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 阴影效果 */
            padding: 20px; /* 内部填充 */
            overflow: auto; /* 如果内容过多，允许滚动 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 999; /* 确保它在其他元素之上 */
            border-radius: 10px; /* 可选圆角 */
            backdrop-filter: blur(10px); /* 可选模糊效果 */
        }
    </style>
</head>
<body>
<form method="post" action="" id="listform">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 学生列表</strong> <a href=""
                                                                                   style="float:right; display:none;">添加字段</a>
        </div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">
                <li>
                    姓名:
                    <input type="text" placeholder="请输入搜索关键字" name="seaname" class="input"
                           style="width:250px; line-height:17px;display:inline-block"/>
                    手机号:
                    <input type="text" placeholder="请输入搜索关键字" name="seaphone" class="input"
                           style="width:250px; line-height:17px;display:inline-block"/>
                    <a href="javascript:void(0)" class="button border-main icon-search" onclick=" changesearch()">
                        搜索</a>
                    <a href="javascript:void(0)" class="button border-main icon-signal" onclick="printInformation()">
                        导出</a>
                </li>
            </ul>
        </div>
        <table id="student_list" class="table table-hover text-center">
            <thead>
                <tr class="t_head">
                    <th width="100" style="text-align:left; padding-left:20px;">ID</th>
                    <th width="10%">姓名</th>
                    <th>手机号</th>
                    <th>性别</th>
                    <th>所在班级</th>
                    <th>出生年月</th>
                    <th width="310">操作</th>
                </tr>
            </thead>

            <tbody class="t-body">
            </tbody>


        </table>
    </div>
</form>


<div class="panel admin-panel updates" style="display: none;">
    <span style=" width: 30px; height: 30px; top: 0; right: 0; position: fixed;" class="cancel" onclick="cancel()">
        <i class="icon-times" style="width: 30px; height: 30px;  font-size: 28px;" ></i>
    </span>
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span>修改班级信息</strong></div>
    <div class="body-content">
        <form class="form-clazz" action="">
            <div class="form-group">
                <div class="label">
                    <input type="text" name="sid" id="sid" value="" hidden/>
                    <label>姓名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="sname" id="sname" value="" style="width:100%; height: 30px;"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>性别：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="sex" id="sex" value="" style="width:100%; height: 30px;"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>爱好：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="hobby" id="hobby" style="width:100%; height:30px;" />
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>生日：</label>
                </div>
                <div class="field">
                    <input type="date" class="input" name="birthdate" id="birthdate" style="width:100%; height:30px;">
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button id="btn" class="button bg-main icon-check-square-o" type="button" onclick="return updateSubmit()"> 提交</button>
                    <button id="reset" class="button bg-dot icon-info" type="reset"> 重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        //发送异步 获取page
        let uri = location.search;
        uri = uri.substring(1);
        //console.log(uri);
        let data = uri.split("=");
        let page = data[1];
        if (typeof page == 'undefined') {
            page = 1;
        }
        //console.log(page);
        loadListClazz()
    })

    let curStu = {}
    let StuList = []
    // 单个修改
    function update(id) {
        $('.updates').show() // 展示页面

        // 获取到要修改的对象
        curStu = StuList.find(function (item) {
            if (item.sid === id) return item
        })

        console.log(curStu)


        // 将值赋予到修改表单中
        $("#sname").val(curStu['sname'])
        $('#sex').val(curStu['sex'])
        $("#hobby").val(curStu['hobby'])
        $("#birthdate").val(curStu['birthdate'])
        $('#cid').val(curStu['cid'])
        $('#sid').val(curStu['sid'])

    }

    function cancel() {
        $('.updates').hide()
    }


    function updateSubmit() {
        $.ajax({
            url: '/student/update',
            type: 'POST',
            data: {
                sid: $('#sid').val(),
                sname: $("#sname").val(),
                sex:  $('#sex').val(),
                hobby: $("#hobby").val(),
                birthdate: $("#birthdate").val(),
            },
            dataType: 'JSON',
            success: function (data) {
                if (data.code === 200) {
                    console.log('更新成功')
                    $('.updates').hide()
                    location.reload()
                }
            }
        })
    }

    function loadListClazz() {
        $.ajax({
            url: "/student/list",
            type: "get",
            dataType: "json",
            success: function (res) {
                console.log(res)
                let arr = res.data
                StuList = res.data
                let str = '';

                for (let i = 0;i < arr.length; i++) {
                    str += `
                        <tr>
                            <td style="text-align:left; padding-left:20px;">${arr[i].sid}</td>
                            <td>${arr[i].sname}</td>
                            <td>${arr[i].phone}</td>
                            <td>${arr[i].sex}</td>
                            <td>${arr[i].cid}</td>
                            <td>${arr[i].birthdate}</td>
                            <td>
                                <div class="button-group">
                                    <a class="button border-main" onclick="return update(${arr[i].sid})"><span class="icon-edit"></span> 修改</a>
                                    <a class="button border-red" href="javascript:void(0)" onclick="return del(${arr[i].sid},1,1)">
                                        <span class="icon-trash-o"></span> 删除</a>
                                </div>
                            </td>
                        </tr>`
                }
                $(".t-body").html('');
                $(".t-body").html(str);
            }
        })
    }

    //搜索
    function changesearch() {
        var name = $("input[name='seaname']").val()
        var phone = $("input[name='seaphone']").val()

        console.log(name)
        console.log(phone)
        if (name || phone) {
            if (phone) {
                $.ajax({
                    url: '/student/search',
                    method: 'GET',
                    data: {
                        keywords: phone,
                        type: 1
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                        let arr = res.data
                        let str = '';

                        for (let i = 0;i < arr.length; i++) {
                            str += `
                        <tr>
                            <td style="text-align:left; padding-left:20px;">${arr[i].sid}</td>
                            <td>${arr[i].sname}</td>
                            <td>${arr[i].phone}</td>
                            <td>${arr[i].sex}</td>
                            <td>${arr[i].cid}</td>
                            <td>${arr[i].birthdate}</td>
                            <td>
                                <div class="button-group">
                                    <a class="button border-main" href="updateStudent.html?sid=${arr[i].sid}"><span class="icon-edit"></span> 修改</a>
                                    <a class="button border-red" href="javascript:void(0)" onclick="return del(${arr[i].sid},1,1)">
                                        <span class="icon-trash-o"></span> 删除</a>
                                </div>
                            </td>
                        </tr>`
                        }
                        $(".t-body").html(' ');
                        $(".t-body").html(str);
                    }
                })
            } else if (name) {
                $.ajax({
                    url: '/student/search',
                    method: 'GET',
                    data: {
                        keywords: name,
                        type: 2
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                        let arr = res.data
                        let str = '';

                        for (let i = 0;i < arr.length; i++) {
                            str += `
                        <tr>
                            <td style="text-align:left; padding-left:20px;">${arr[i].sid}</td>
                            <td>${arr[i].sname}</td>
                            <td>${arr[i].phone}</td>
                            <td>${arr[i].sex}</td>
                            <td>${arr[i].cid}</td>
                            <td>${arr[i].birthdate}</td>
                            <td>
                                <div class="button-group">
                                    <a class="button border-main" href="updateStudent.html?sid=${arr[i].sid}"><span class="icon-edit"></span> 修改</a>
                                    <a class="button border-red" href="javascript:void(0)" onclick="return del(${arr[i].sid},1,1)">
                                        <span class="icon-trash-o"></span> 删除</a>
                                </div>
                            </td>
                        </tr>`
                        }
                        $(".t-body").html('');
                        $(".t-body").html(str);
                    }
                })
            }
        } else {
            loadListClazz()
        }
    }


    //单个删除
    function del(id) {
        //console.log(id);
        if (confirm("您确定要删除吗?")) {
            $.ajax({
                url: "/student/delete",
                data: {
                    sid: id
                },
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.code === 200) {
                        alert('删除成功！！！')
                        location.reload()
                    }
                }
            })
        }
    }


    function printInformation() {
        $.ajax({
            //url: "StudentServlet?methodName=print",
            url: 'PrintServlet',
            data: '',
            type: "get",
            dataType: "json",
            success: function (res) {
                console.log("success")
                if (res.code == 1) {
                    alert("导出成功");
                    location.reload();
                } else {
                    alert("导出失败，重新导出");
                }
            },
            error: function () {
                alert("导出失败");
            }
        })
    }


</script>
</body>
</html>